<style lang='scss' scoped>
  .text{
    clear: both;
    color: #9B9B9B;
    margin-bottom: 104px;
    margin-top: 100px;
  }

  .m-page{
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .c-body{
    flex: 1;
    background: #F2F2F2;
    margin-top: 70px;
  }

  .title{
    height: 70px;
    font-size:50px;
    color:#303641;
    line-height:70px;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 70px;
  }

  .cont{
    margin: 0 auto;
    width: 1128px;
  &>.label{
      text-align: left;
      height:28px;
      font-size:20px;
      color:rgba(255,255,255,1);
      line-height:28px;
      padding-left: 20px;
    }
  }

  .list-wrap{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
  }

  .item{
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .box{
    overflow: hidden;
    position: relative;
    width: 300px; height: 400px;
    background: #fff;
    margin: 200px auto;
    border-radius:4px;
  }

  .head{
    width: 100%;
    float: left;
    margin: 31px auto 19px auto;
    height:25px;
    font-size:18px;
    color:rgba(0,0,0,1);
    line-height:25px;
    text-align: center;
  }

  .qr-code{
    clear: both;
    width:160px;
    height:160px;
    background: #ccc;
    margin: 0 auto;
  }

  .price{
    width: 100%; height: 36px;
    line-height: 36px;
    font-size:25px;
    text-align: center;
    margin-top: 21px;
  }

  .type{
    height:21px;
    font-size:15px;
    color:rgba(48,54,65,1);
    line-height:21px;
    margin-top: 9px;
    text-align: center;
  }

  .bottom{
    position: absolute;
    width: 100%; height: 50px;
    border-top:1px solid rgba(229,229,229,1);
    left: 0;
    bottom: 50px;
    text-align: center;
    line-height: 50px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
  }

  .close{
    position: absolute;
    left: 10px; top: 10px;
    width: 30px; height: 30px;
    cursor: pointer;
  }

  div.green-18{
    font-size: 18px; color: #02BB00;
  }

  .success{
    width: 93px; height: 93px;
    margin: 91px auto 25px auto;
    background: #ccc;
  }

  .success-text{
    clear: both;
    height:28px;
    font-size:20px;
    color:rgba(0,0,0,1);
    line-height:28px;
    text-align: center;
    margin-bottom: 15px;
  }

  .award{
    text-align: center;
    height:21px;
    font-size:15px;
    color:rgba(48,54,65,1);
    line-height:21px;
  }

  .c-text{
    text-align: center;
    height:17px;
    font-size:12px;
    color:rgba(155,155,155,1);
    line-height:17px;
    margin-top: 20px;
    margin-bottom: 81px;
  }

  .c-item{
    position: absolute;
    width: 100%; height: 80px;
    background: #000;
    bottom: 0; left: 0;
  &>.money{
      height: 42px;
      margin-top: 29px;
      margin-left: 48px;
      color:rgba(255,255,255,1);
      line-height:28px;
      font-size:20px;
      text-align: left;
    }
  }

  .c-btn{
    position: absolute;
    right: 20px; top: 18px;
    width:100px;
    height:45px;
    background:rgba(57,184,102,1);
    border-radius:2px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-size:20px;
  }

  .slide-enter-active {
    transition: all .3s ease;
  }
  .slide-leave-active {
    transform: translateY(0);
  }
  .slide-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active 在低于 2.1.8 版本中 */ {
    transform: translateY(100%);
    opacity: 0;
  }

  .buyshop{
    position: absolute;
    width: 100%; height: 50px;
    border-top:1px solid rgba(229,229,229,1);
    left: 0;
    bottom: 0;
    text-align: center;
    line-height: 50px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
  }
</style>
<template>
  <section class='m-page'>
    <y-head name="单购产品"/>
    <div class="c-body">
      <div class="title">{{typeName[buyType]}}</div>
      <div class="c-text">使用其他方式付款，联系我们：微信或电话 15325719985</div>
      <div class="cont">
        <div class="list-wrap">
          <x-shop-item2 v-for="(item,index) in itemList" :key="index" :setType="buyType" :setCount="'(' + countList(item)[listTemp] + '个)'" :setDiscount="disCountList(item)[listTemp]" :setPrice="item.price" class="item" @click.native="buySub(index)"/>
        </div>
      </div>
    </div>
    <transition name="slide">
      <div class="c-item" v-if="1" @click.stop="1">
        <div class="money">{{buyItem.name + '(' + countList(buyItem)[listTemp] + '个)年费  ￥' + buyItem.price}}</div>
        <button class="c-btn" @click.stop="buy">购买</button>
      </div>
    </transition>
    <!-- 购买弹框 -->
    <x-pop-wrap v-if="show">

      <!-- 购买前 -->
      <div class="box" slot="box" v-if="0">
        <yd-icon name="error" class="close" color="#9B9B9B" size="15px" @click.native="show = false"></yd-icon>
        <div class="head">{{'购买' + buyItem.name}}</div>
        <div class="qr-code"></div>
        <div class="price">¥{{buyItem.price}}</div>
        <div class="type">使用微信扫码购买</div>
        <div class="bottom">购买标示默认同意“虚拟服务，不退款”条款</div>
      </div>

      <!-- 购买成功 -->
      <div class="box" slot="box" v-else>
        <yd-icon name="error" class="close" color="#FE3824" size="15px" @click.native="show = false"></yd-icon>
        <div class="success"></div>
        <div class="success-text">完成支付，购买成功</div>
        <div class="award">恭喜，已获得{{buyItem.name}}</div>
        <div class="bottom green-18">前往管理后台</div>
        <div class="buyshop green-18" @click="show=false">继续购买</div>
      </div>

    </x-pop-wrap>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        show: false,
        flag: false,
        itemList:[],
        listTemp: 0,
        buyItem: {},
        buyType:'',
        typeName: {
          outframe: '外框',
          inframe: '内框',
          outmatcard: '外衬卡纸',
          middlematcard: '中衬卡纸',
          inmatcard: '内衬卡纸',
          submanager: '子管理员',
          subagent: '微代',
        },
      }
    },

    components: {},

    computed: {
      ...mapState({
        buysetOutFrame: state => state.order.buysetOutFrame,
        buysetInFrame: state => state.order.buysetInFrame,
        buysetOutMatcard: state => state.order.buysetOutMatcard,
        buysetMiddleMatcard: state => state.order.buysetMiddleMatcard,
        buysetInMatcard: state => state.order.buysetInMatcard,
        buysetManage: state => state.order.buysetManage,
        buysetAgent: state => state.order.buysetAgent,
      }),

    },

    mounted () {
      document.addEventListener('click', () => {
        this.flag = false
      })
      this.buyType = this.$route.query.buyType
      this.itemList = this.confirmList(this.$route.query.buyType)
      this.listTemp = this.confirmIndex(this.$route.query.buyType)
      this.buyItem = this.itemList[0]
    },
    destroyed () {
    },
    methods: {
      ...mapActions([
        'buyVIP'
      ]),
      buySub(index){
        this.buyItem = this.itemList[index]
      },
      shop () {
        this.flag = true
      },
      buy () {
        let params = {
          action:'buyvip',
          buy:[this.buyItem.id]
        }
        this.buyVIP(params)
          .then(data => {
            this.show = true
          })
      },
      confirmList(sub){
        switch (sub){
          case 'outframe':
            return this.buysetOutFrame
            break
          case 'inframe':
            return this.buysetInFrame
            break
          case 'outmatcard':
            return this.buysetOutMatcard
            break
          case 'middlematcard':
            return this.buysetMiddleMatcard
            break
          case 'inmatcard':
            return this.buysetInMatcard
            break
          case 'submanager':
            return this.buysetManage
            break
          case 'subagent':
            return this.buysetAgent
            break
          default:
            break
        }
      },
      confirmIndex(sub){
        return ['outframe','inframe','outmatcard','middlematcard','inmatcard','submanager','subagent'].indexOf(sub)
      },
      countList(item){
        return item.mset.split(',')
      },
      disCountList(item){
        return item.discount.split(',')
      },

    }
  }

</script>

